<!--
 * @Author: your name
 * @Date: 2021-08-16 15:48:20
 * @LastEditTime: 2021-08-28 16:50:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \orderSystems\src\views\menuMag\MenuFile.vue
-->
<template>
  <div id="Menu-file">
    <!-- 菜品档案 -->
    <!-- 查询部分 -->
    <Search @shareSearchStatus="shareSearchStatus"></Search>
    <!-- 表格数据部分 -->
    <div class="table-box">
      <DishTable
        :moudleName="moudleName"
        :tableData="tableData"
        :clickNowPage="page"
        :pageCount="pageSize"
        :nowPageSize="nowTotalSize"
        @shareData="shareData"
      ></DishTable>
      <!-- 分页部分 -->
      <Pagination :totalCount="allCount" @shareData="shareData"></Pagination>
    </div>
  </div>
</template>

<script>
import Search from "../../components/gou/Search1";
import DishTable from "../../components/gou/DishTable1.vue";
import Pagination from "../../components/common/Pagination.vue";
import bus from "../../EventBus.js";
export default {
  components: {
    Search,
    DishTable,
    Pagination,
  },
  data() {
    return {
      moudleName: "菜单档案",
      tableData: [], //表格需要渲染的数据
      page: 1, //分页页码
      pageSize: 5, //每页展示数据条数
      allCount: 0, //总数据条数
      valueId: "", //查询菜品类别对应的id
      name: "", //查询菜品名
      nowTotalSize: 0, //当前页实际数据数量
      searchFlag: false, //查询标志变量
    };
  },
  created() {
    //添加时传过来的分页
    this.getMenuFileInfo(this.page, this.pageSize);
  },
  mounted(){
    bus.$on("shareBusData",(v)=>{
      this.tableData=v.tableData;
      this.allCount=v.allCount;
      this.nowTotalSize=v.nowTotalSize;
    })
  },
  methods: {
    /**
     * @description: 使用查询功能时，子传父触发的事件
     * @param {*} v 从search子组件接收的数据
     * @return {*}
     */
    shareSearchStatus(v) {
      this.tableData = v.tableData; //查询的数据
      // this.flag=v.searchStatus;//代表查询的状态标志
      this.allCount = v.totalCount; //查询的总条数
      this.name = v.name; //查询的名字
      this.valueId = v.valueId; //查询菜品类别对应的id
      this.searchFlag = v.searchFlag; //查询标志变量
    },
    /**
     * @description: 表格子组件和分页子组件向父组件传值触发的函数
     * @param {*} v 传给父组件值 是一个对象
     * @return {*}
     */
    shareData(v) {
      this.page = v.nowPage; //当前页
      this.pageSize = v.pageCount; //当前页数据条数
      if (this.searchFlag) {
        this.getMenuFileSearchInfo(this.name, this.valueId, this.page, this.pageSize); //更新表格数据
      }else{
         this.getMenuFileInfo(this.page,this.pageSize);//更新表格数据
      }

      bus.$emit("sharePage", { page: this.page, pageSize: this.pageSize });
    },
    /**
     * @description: 获取当前页的数据函数
     * @param {*} page 当前页码
     * @param {*} pageSize  显示数据条数
     * @return {*}
     */
    async getMenuFileInfo(page, pageSize) {
      const { data: res } = await this.axios.post("/dishFile/list", {
        page: page,
        pageSize: pageSize,
      });
      if (res.code == 200) {
        console.log(res);
        // console.log('x',res.data);
        this.tableData = res.data; //将表格数据存入tableData数组中，并通过父传子传给table子组件
        this.allCount = res.count; //接收总数据条数
        this.nowTotalSize = res.data.length; //当前点击页的数据条数
      }
    },
    /**
     * @description: 获取查询当前页的数据函数
     * @param {*} page 当前页码
     * @param {*} pageSize  显示数据条数
     * @return {*}
     */
    async getMenuFileSearchInfo(name, valueId, page, pageSize) {
      const { data: res } = await this.axios.post("/dishFile/list", {
        name: name,
        categoryName: valueId,
        page: page,
        pageSize: pageSize,
      });
      if (res.code == 200) {
        // console.log(res);
        this.tableData = res.data; //将表格数据存入tableData数组中，并通过父传子传给table子组件
        this.allCount = res.count; //接收总数据条数
        this.nowTotalSize = res.data.length; //当前点击页的数据条数
      }
    },
  },
};
</script>

<style lang='less' scoped>
.table-box {
  margin-top: 1.5rem;
  border: 0.1rem solid #dbe0e9;
  background-color: #fff;
}
</style>
